<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">{{ title }}</text>
		</view>
		<scroll-view class="notice-list" scroll-y="true" :style="{'height': `calc(100vh - ${safeTop}px - 86rpx)`}">
			<view class="notice-activity-item" v-if="type === 1" v-for="notice of noticeList">
				<view class="time-row">18小时前</view>
				<view class="content-row">
					<image class="activity-notice-img" src="/static/activityMes.png"></image>
					<view class="text-box">
						<view class="activity-notice-title">{{ notice.fromName }}</view>
						<view class="activity-notice-text">{{ notice.content }}</view>
					</view>
				</view>
			</view>
			<view class="notice-system-item" v-if="type === 0" v-for="notice of noticeList">
				<view class="title-row">
					<view class="title-box">
						<image class="system-notice-img" src="/static/mesSystemPic.png"></image>
						<text class="system-title">系统通知</text>
					</view>
					<view class="time-box">4天前</view>
				</view>
				<view class="content-text">{{ notice.content }}</view>
			</view>
			<view class="official-item" v-if="type === 2">
				<view class="time-text">周三 14:23</view>
				<view class="mes-box">
					<image class="avatar-img" src="/static/logo.png"></image>
					<view class="content-box">和2021说再见，12月31日活动大推荐，开启精彩2022！>></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				safeTop: 0,
				noticeList: [],
				pageNum: 1,
				title: ''
			};
		},
		onLoad(q) {
			this.safeTop = this.$safeTop;
			this.type = +q.type;
			this.getNotice();
			switch (this.type) {
				case 0:
					this.title = '系统通知';
					break;
				case 1:
					this.title = '活动通知';
					break;
				case 2:
					this.title = '官方号';
					break;
			}
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			getNotice() {
				const params = {
					pageSize: 50,
					pageNum: this.pageNum,
					type: this.type
				}
				this.$apis.getNoticeList(params).then(res => {
					if (res.code === 0) {
						this.noticeList = res.data.list;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: #F6F7F9;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 999;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}
		}

		.notice-list {
			width: 100%;

			.notice-activity-item {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 32rpx;

				.time-row {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}

				.content-row {
					width: 686rpx;
					background: #FFFFFF;
					border-radius: 28rpx;
					padding: 32rpx 0;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					margin-top: 16rpx;

					.activity-notice-img {
						width: 64rpx;
						height: 64rpx;
						margin-left: 32rpx;
					}

					.text-box {
						width: 570rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;

						.activity-notice-title {
							width: 100%;
							font-size: 32rpx;
							font-weight: bold;
							color: #222222;
						}

						.activity-notice-text {
							width: 100%;
							font-size: 28rpx;
							font-weight: 400;
							color: #222222;
							margin-top: 20rpx;
						}
					}
				}
			}

			.notice-system-item {
				width: 686rpx;
				margin-top: 32rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				padding: 32rpx 0;
				margin-left: 32rpx;

				.title-row {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title-box {
						margin-left: 32rpx;
						display: flex;
						align-items: center;

						.system-notice-img {
							width: 40rpx;
							height: 32rpx;
						}

						.system-title {
							font-size: 32rpx;
							font-weight: bold;
							color: #222222;
							margin-left: 16rpx;
						}
					}

					.time-box {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-right: 32rpx;
					}
				}

				.content-text {
					width: 622rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					margin-top: 20rpx;
					margin-left: 32rpx;
				}
			}
		
			.official-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 32rpx;
				
				.time-text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
				
				.mes-box {
					width: 100vw;
					margin-top: 36rpx;
					display: flex;
					align-items: flex-start;
					
					.avatar-img {
						width: 96rpx;
						height: 96rpx;
						border-radius: 96rpx;
						margin-left: 32rpx;
					}
					
					.content-box {
						width: 440rpx;
						padding: 32rpx;
						background: #FFFFFF;
						border-radius: 0px 24rpx 24rpx 24rpx;
						margin-left: 16rpx;
					}
				}
			}
		}
	}
</style>
